<template>
  <div class="app-dashboard">
    <header-manage :platform="platform" :form-data="formData" class="p10px" @edit="onPlatformEdit" />

    <div class="p10px rounded-10px">
      <!-- 数据看板 -->
      <el-row v-if="platform.details" :gutter="10">
        <el-col v-for="(item, key) in platform.details.count" :key="key" :xs="12" :sm="12" :md="6" :lg="6" :xl="6" class="mb-2.5">
          <num-data-card :title="item.title" :number="item.number" :img="countDataImg[key]" />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <div class="">
            <el-empty description="暂无数据" />
          </div>
        </el-col>
      </el-row>
    </div>
    <dk-form ref="editFormRef" :form-data="formData" :is-dialog="true" top="5vh" @submit="fetchPlatform" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getPlatform } from '@/api/platform'
import { getFreeEditForm } from '@/api/platform/free'
import HeaderManage from '@/views/platform/components/common/headerManage.vue'
import NumDataCard from '@/views/platform/components/common/numDataCard.vue'
import { getPlaid } from '@/utils/auth'

defineOptions({
  name: 'FreeIndex'
})

// 响应式状态
const router = useRouter()
const platform = ref({
  details: {
    count: null,
    setting: null
  }
})
const formData = ref(null)
const editFormRef = ref(null)
const plaid = ref(0)

// 数据看板图标
const countDataImg = {
  user: new URL('@/assets/icon/user.png', import.meta.url).href,
  order: new URL('@/assets/icon/order.png', import.meta.url).href,
  refund: new URL('@/assets/icon/refund.png', import.meta.url).href,
  transfer: new URL('@/assets/icon/transfer.png', import.meta.url).href
}
// 获取应用基本信息
const fetchPlatform = () => {
  getPlatform(plaid.value)
    .then((res) => {
      platform.value = res.data
    })
    .catch(() => {
      router.push({ path: '/platform/list' })
    })
}

// 编辑应用
const onPlatformEdit = () => {
  getFreeEditForm(platform.value.plaid).then((res) => {
    formData.value = res.data
    editFormRef.value.show()
  })
}

onMounted(() => {
  plaid.value = getPlaid()
  fetchPlatform()
})
</script>

<style scoped></style>
